<template>
	<view>
		<x-navtitle hoxshaow text='购物车' color='#000'></x-navtitle>
		<view class=" pg-30 header d-flex aling-centen border-b bgColor-white" @tap='Administration'>
			<text>{{statusText}}</text>
			<image src="../../static/icon/guanli.png"></image>
		</view>
		<!-- 商品列表 -->
		<view class="px-30 cordList">
			<view class="d-flex item" v-for="(item,index) in goodsList" :key='item.id'>
				<u-checkbox size='40' active-color='#FF890B' :name='index' @change='itemChange' v-model='item.checked'>
				</u-checkbox>
				<view class="d-flex flex-grow1">
					<navigator hover-class="none" :url="'/pages/prot_details/prot_details?cid='+item.goods_id" class="imgbox" >
						<image class="" :src="item.goods_logo" mode="aspectFit"></image>
					</navigator>
					<view class="d-flex flex-d jfy-sb ml-20 flex-grow1 position-r">
						<text class="logo" v-if="item.goods_number>=item.number_stock">库存不足</text>
						<text class="text-overflow2">{{item.goods_title}}</text>
						<text class="font-26 textColor999">{{item.goods_spec}}</text>
						<view class="d-flex-yCenter-sb">
							<text class="Price-color">￥{{item.price_selling}}</text>
							<view class="">
								<view class="d-flex aling-centen">
									<u-icon @tap='subtraction(item,index)' name="minus" color="#000" size="30"></u-icon>
									<text class="mx-30">{{item.goods_number}}</text>
									<u-icon @tap='addition(item,index)' name="plus" color="#000" size="30"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="fonter px-30 py-20 position-flex-bottom bgColor-white box-shadow">
			<view class="d-flex-yCenter-sb mb-30">
				<text>赚取会员积分</text>
				<text>{{integral}}</text>
			</view>
			<view class="d-flex-yCenter-sb">
				<view class="d-flex-yCenter">
					<u-checkbox active-color='#FF890B' @change='selectAll' size='40' v-model='checked'>
						<text class="font-32">全选</text>
					</u-checkbox>
					<view class="">
						小计：
						<text class="Price-color">￥{{money.toFixed(2)}}</text>
					</view>
				</view>
				<view v-if='btnStatus' class="btn" @tap='submit'>立即付款</view>
				<view v-else class="btn deleteBtn" @tap='deleteGoods'>
					<text class="textColor-black mr-20">删除</text>
					<u-icon name="close" color="#000" size="26"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http_usershop_cart_lst,
		http_user_shop_cart_add,
		http_userShop_cart_delete
	} from '@/config/apiRouter.js'
	export default {
		data() {
			return {
				statusText: '管理',
				btnStatus: true, // 0 显示删除 1显示付款
				loginStatus: null,
				goodsList: [],
				checked: false, // 全选
				money: 0, // 合计价格
				integral: 0, // 合计积分
			}
		},
		onShow() {
			if (this.userMD.getToken(true)) {
				this.loginStatus = true
				this.checked = false
				this.money = 0
				this.integral = 0
				this.getCardList()
				return
			}
			this.loginStatus = false
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			setTimeout(()=>uni.hideLoading(),1500)
		},
		methods: {
			// 管理
			Administration() {
				if (this.btnStatus) {
					this.statusText = '取消'
					this.btnStatus = false
					return
				}
				this.statusText = '管理'
				this.btnStatus = true
			},
			// 删除商品
			deleteGoods() {
				let dataArr = new Array()
				this.goodsList.map(item => {
					if (item.checked) dataArr.push(item.id)
				})
				if (!dataArr.length) {this.$tool.showToast('请选择商品');return}
				http_userShop_cart_delete({
					data: {
						id: dataArr.join(',')
					}
				}).then(res => {
					this.$tool.showToast('删除成功', true)
					dataArr.map((item, i) => this.goodsList.splice(i, 1))
				})
			},
			// 确认付款
			submit() {
				let dataArr = new Array()
				let beOverdue=0
				this.goodsList.map(item => {
					// 选择商品数量不能大于库存  -----（防备加入购物车之后而库存已经买完）
					if (item.checked && item.goods_number<=item.number_stock) {
						let data = {
							goods_id: item.goods_id,
							goods_spec: item.goods_spec,
							goods_number: item.goods_number
						}
						dataArr.push(data)
					}
					// 记录库存不足的商品数量
					if(item.goods_number>item.number_stock) beOverdue++
				})
				if(!dataArr.length){
					this.$tool.showToast('请选择要购买的商品')
					return
				}
				// 判断是否全部过期
				if(beOverdue==this.goodsList.length){
					uni.showModal({
						title:'提示',
						content:'你的购物车商品库存不足'
					})
					return
				}
				if (!dataArr.length) {this.$tool.showToast('请选择商品'); return}
				const fun=()=>{
					let datas = {
						goods_data: JSON.stringify(dataArr),
						type: this.goodsType,
					}
					datas = JSON.stringify(datas)
					uni.navigateTo({
						url: '/goodsPackage/confirm-order/confirm-order?data=' + datas
					})
				}
				// 部分过期
				if(beOverdue){
					uni.showModal({
						title:'下单提示',
						content:'你本次选择商品中有 '+beOverdue+' 件商品已过期，如果继续下单只会提交未过期的商品，继续下单吗？',
						success:res=>{
							if (res.confirm) {
							   fun()
							}
						}
					})
					return
				}
				fun()

			},
			// 单选商品
			itemChange(e) {
				if (e.value) {
					// 组件双向绑定的修改没有检测到 必须手动修改
					this.goodsList[e.name].checked = true
					let bool = this.goodsList.every(item =>  item.checked)
					if (bool) this.checked = true
					this.funSun()
					return
				}
				this.goodsList[e.name].checked = false
				this.checked = false
				this.funSun()
			},
			// 全选
			selectAll(e) {
				if (e.value) {
					this.goodsList.map(item => item.checked = true)
					this.funSun()
					return
				}
				this.goodsList.map(item => item.checked = false)
				this.money = 0
				this.integral = 0
			},
			// 计算价格和积分
			funSun() {
				let money = 0
				let integral = 0
				this.goodsList.map(item => {
					if (item.checked) {
						money += (parseFloat(item.price_selling) * item.goods_number)
						integral += parseFloat(item.integral)
					}
				})
				this.money = money
				this.integral = integral
			},
			// 商品列表
			getCardList() {
				http_usershop_cart_lst().then(res => {
					if (!res.data.length) return
					let data = res.data[0].goods_list
					data.map(item => {
						item.checked = false
					})
					this.goodsList = data
				})
			},
			// 数量加
			addition(item, index) {
				if (item.goods_number == 99) {this.$tool.showToast('商品最多可购买99件');return}
				if(item.goods_number>=item.number_stock) {this.$tool.showToast('库存不足');return}
				this.updateCardSun(item, 1, index)
			},
			// 数量减
			subtraction(item, index) {
				if (item.goods_number == 1) {this.$tool.showToast('商品数量不能低于1件');return}
				this.updateCardSun(item, 0, index)
			},
			// 修改购物车数量
			updateCardSun(item, type, index) {
				let sum = item.goods_number
				type ? sum++ : sum--
				let data = {
					goods_id: item.goods_id,
					goods_spec: item.goods_spec,
					goods_number: sum
				}
				http_user_shop_cart_add({
					data
				}).then(res => {
					// 修改列表数量
					this.goodsList[index].goods_number = sum
					// 修改成功  当商品是选择时重新计算价格
					if (item.checked) this.funSun()
				})
			},
		}
	}
</script>

<style lang="scss">
	.header {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 32rpx;
			height: 24rpx;
		}
	}

	.cordList {
		margin-top: 100rpx;

		.item {
			padding: 25rpx 0;
		}
		.logo{
			position: absolute;
			left: 50%;
			top:50%;
			font-size: 20rpx;
			width: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50%;
			border: 1px solid rgba(255,0,0,0.5);
			margin-top: -50rpx;
			color: rgba(255,0,0,0.5);
			transform: rotate(-35deg);
		}
		.imgbox {
			width: 180rpx;
			height: 180rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
			}
		}
	}

	.fonter {
		.btn {
			width: 260rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background: $color-zt;
			border-radius: 12rpx;
		}

		.deleteBtn {
			background: #fff;
			border: 1px solid #000;
		}
	}
</style>
